<template>
  <div class="wrap-page">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="个人信息" name="first">
          <el-descriptions
            class="global-descriptions"
            :column="1"
            v-if="profile"
          >
            <el-descriptions-item label-class-name="item-label" label="帐号">{{
              profile.username
            }}</el-descriptions-item>
            <el-descriptions-item label-class-name="item-label" label="角色">
              <PipeTags type="role" :state="profile.role.name" />
            </el-descriptions-item>
            <el-descriptions-item
              label-class-name="item-label"
              label="登录时间"
            >
              <PipeDatetime :value="profile.iat" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form
            ref="formRef"
            label-width="100px"
            :model="formData"
            :rules="formRules"
          >
            <el-form-item label="原密码" prop="oldPassword">
              <el-input
                type="password"
                show-password
                v-model="formData.oldPassword"
                v-on:keyup.enter="handleClickSubmit(formRef)"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input
                type="password"
                show-password
                v-model="formData.password"
                v-on:keyup.enter="handleClickSubmit(formRef)"
              ></el-input>
            </el-form-item>
            <el-form-item label="再次输入" prop="confirmPwd">
              <el-input
                type="password"
                show-password
                v-model="formData.confirmPwd"
                v-on:keyup.enter="handleClickSubmit(formRef)"
              ></el-input>
            </el-form-item>
            <el-form-item class="btn-box">
              <el-button
                type="primary"
                @click="handleClickSubmit(formRef)"
                :loading="isLoading"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { ElForm } from 'element-plus';
import { repass } from '@/apis/account';
import { ElMessage } from 'element-plus';

import PipeDatetime from '../components/PipeDatetime.vue';
import { useAuthStore } from '@/stores/auth';
import { storeToRefs } from 'pinia';

const authStore = useAuthStore();
const { profile } = storeToRefs(authStore);

// 加载状态
const isLoading = ref(false);

const activeName = ref('first');

const formRef = ref<InstanceType<typeof ElForm>>();

const formData: API.account.RepassDto = reactive({
  oldPassword: '',
  password: '',
  confirmPwd: ''
});

// 自定义表单验证 - 新密码
const validatePassword = (_rule: any, value: any, callback: any) => {
  if (value.length <= 0) {
    return callback(new Error('请输入新密码'));
  }
  if (value.length > 32) {
    return callback(new Error('长度不能超过32位字符'));
  }
  if (formData.confirmPwd && value != formData.confirmPwd) {
    return callback(new Error('两次输入的密码不一致'));
  }
  callback();
};

// 自定义表单验证 - 再次输入
const validateConfirmPwd = (_rule: any, value: any, callback: any) => {
  if (value.length <= 0) {
    return callback(new Error('请再次输入新密码'));
  }
  if (value.length > 32) {
    return callback(new Error('长度不能超过32位字符'));
  }
  if (formData.password && value != formData.password) {
    return callback(new Error('两次输入的密码不一致'));
  }
  callback();
};

const formRules = reactive({
  oldPassword: [
    { type: 'string', required: true, message: '请输入原密码' },
    { max: 32, trigger: 'blur', message: '长度不能超过32位字符' }
  ],
  password: [
    // { type: 'string', required: true, message: '请输入新密码' },
    // { max: 32, trigger: 'blur', message: '长度不能超过32位字符' }
    { validator: validatePassword, required: true, trigger: 'blur' }
  ],
  confirmPwd: [
    // { type: 'string', required: true, message: '请再次输入新密码' },
    // { max: 32, trigger: 'blur', message: '长度不能超过32位字符' }
    { validator: validateConfirmPwd, required: true, trigger: 'blur' }
  ]
});

// btn - submit
const handleClickSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) submitDatabase();
  });
};

// 提交
const submitDatabase = () => {
  isLoading.value = true;
  repass(formData)
    .then((res) => {
      isLoading.value = false;
      ElMessage.success(res.message);
    })
    .catch(() => {
      isLoading.value = false;
    });
};
</script>

<style lang="scss" scoped>
.wrap-page {
  :deep(.item-label) {
    display: inline-block;
    width: 72px;
    text-align: right;
  }
}
</style>
